<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>

  <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>

  <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>

</head>

<body>
  <div id="root">

  </div>



  <script type="text/babel">
    const a = '这是数据绑定'
    const b = 'lll'
    const c = true ? <div>555</div> : ""
    const d = [
      { title: '我是标题1', id: 1 },
      { title: '我是标题2', id: 2 },
      { title: '我是标题3', id: 3 }
    ]
    const e = d.map(r => <div key={r.id}>{r.title}</div>)
    const f = ['a', 'b', 'c'].join(" ")
    const g = () => {
      console.log('log的值')
      return 'ret'
    }

    const Zujian = function (props) {
      return <h1>这是组件 {props.k2}</h1>
    }

    class Zujian2 extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          a: 1
        }
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick() {
        this.setState({
          a: 6666
        })
      }
      render() {
        return (
          <h1>
            这也是组件{this.state.a}
            // 不会刷新整个页面加载数据，只会在页面加载的地方刷新
            <input
              type="text"
              value={this.state.a}
              onChange={(ev) => this.setState({ a: ev.target.value })} />
            <button onClick={this.handleClick}>点一下</button>
          </h1>
        )
      }
    }



    const kfc = (
      // <div>
      //   <p className={b}>1</p>
      //   <p className={f}>2</p>
      // hi kfc {a}
      //   {c}
      //   {e}
      //   <button onClick={g}>点一下</button>
      // </div>
      <div>
        <Zujian k2="6666" >7777</Zujian>
        <Zujian2 k1="123"></Zujian2>
      </div>
    )
    ReactDOM.render(kfc, document.getElementById('root'))
  </script>
</body>

</html>